<template>
  <van-cell class="article-item">
    <van-row>
      <van-col span="12">
        <div class="cover-wrap">
          <img  class="cover-item-img" :src="imageLink" @click="gotext" />
        </div>
      </van-col>
      <van-col span="9">
        <div class="title" @click="gotext">{{ article.title }}</div>
        <div class="like">
          <van-icon v-if="!islike" name="like-o" size="20" @click="setLike" /><van-icon v-else name="like" size="20" @click="setLike" />
        </div>
        <div class="pinglunshu" @click="gotext">
          <div>
            <span>评论:{{ article.comm_count }}</span>
            <span>{{ article.pubdate }}</span>
          </div>
        </div>
        <div class="zuozhetouxiang"><img class="right-cover" :src="imageLink2" @click="goautor" /><span>{{ article.aut_name }}</span></div>
      </van-col>
    </van-row>
  </van-cell>
</template>

<script>
import { mapState } from 'vuex'
export default {
  name: 'ArticleItem',
  components: {},
  props: {
    article: {
      type: Object,
      required: true
    },
    number: {
      type: Number,
      required: true
    }
  },
  data () {
    return {
      imageLink: require('@/assets/photo' + this.article.photoid + '/p1 (' + this.number + ').webp'),
      imageLink2: ''
    }
  },
  computed: {
    islike () {
      return this.$store.state.textLike.findIndex(val => val.textid === this.article.textid.toString()) !== -1
    },
    autorinfo () {
      return this.autorlist.find(val => val.name === this.article.aut_name)
    },
    ...mapState(['autorlist'])
  },
  created () {
    var p = this.autorinfo.photo
    this.imageLink2 = require('@/assets/touxiang/' + p)
  },
  methods: {
    setLike () {
      if (!this.islike) {
        this.$store.commit('addLikeText', { textid: this.article.textid.toString(), id: this.article.id })
        this.$toast.success('收藏成功！')
      } else {
        this.$store.commit('removeLikeText', this.article.textid.toString())
        this.$toast.fail('已取消收藏')
      }
    },
    gotext () {
      if (this.article.message) {
        this.$toast.fail('文章正在审核，暂时无法查看')
      } else {
        this.$router.push(`/text/${this.article.textid}`)
        this.$store.commit('addhistory', this.article.textid)
      }
    },
    goautor () {
      if (this.article.aut_name !== 'damo') {
        this.$router.push(`/autor/${this.article.aut_name}`)
      } else {
        this.$router.push('/my')
      }
    }
  }
}
</script>

<style scoped lang="less">
  img{
      width:100%;
  }
  .zuozhetouxiang{
      position:absolute;
      bottom:0px;
      right:0px;
      width: 100px;
      text-align:center;
      img{
            border-radius:100%;
            margin-bottom:-10px;
         }
  }
  .article-item{
      padding-bottom:30px;
      border-bottom:1px solid #e2e2e2;
  }
  .cover-wrap{
      padding-right:20px;
  }
  .pinglunshu{
      margin-top:55px;
      span{
            font-size:17px;
            margin-right:10px;
          }
  }
  .like{
      position:absolute;
      top:80px;
      right:120px;
  }
</style>
